<template>
  <view class="runes-container">
    <view class="section-header">
      <view class="header-row">
        <text class="section-title">符文配方</text>
        <button class="upgrade-button" @click="navigateToUpgrade">符文升级</button>
      </view>
      <text class="section-subtitle">暗黑破坏神2重置版符文之语配方大全</text>
    </view>

    <!-- 搜索框和排序选项 -->
    <view class="search-sort-container">
      <view class="search-container">
        <input
          class="search-input"
          type="text"
          v-model="searchQuery"
          placeholder="搜索符文配方名称或符文..."
          @input="handleSearch"
        />
        <view class="search-icon" v-if="!searchQuery">
          <text class="iconfont icon-search"></text>
        </view>
        <view class="clear-icon" v-else @click="clearSearch">
          <text class="iconfont icon-close"></text>
        </view>
      </view>

      <view class="sort-container">
        <picker
          :value="currentSortIndex"
          :range="sortOptions"
          range-key="label"
          @change="handleSortChange"
        >
          <view class="sort-picker">
            <text>{{ sortOptions.find(opt => opt.value === currentSort).label }}</text>
            <text class="iconfont icon-down"></text>
          </view>
        </picker>
      </view>
    </view>

    <view class="rune-categories">
      <view
        v-for="(category, index) in categories"
        :key="index"
        class="category-item"
        :class="{ active: activeCategory === index }"
        @click="setActiveCategory(index)"
      >
        {{ category }}
      </view>

      <view
        class="category-item combination-toggle"
        :class="{ active: showCombinationPreview }"
        @click="toggleCombinationPreview"
      >
        符文组合器
      </view>
    </view>

    <!-- 符文组合预览 -->
    <rune-combination-preview v-if="showCombinationPreview" :runes="runes" :runewords="runewords" />

    <view class="runewords-list" v-show="!showCombinationPreview">
      <view
        v-for="(runeword, index) in filteredRunewords"
        :key="index"
        class="runeword-card"
        @click.stop
        @click="showRunewordDetail(runeword)"
      >
        <view class="runeword-header">
          <view class="runeword-name-container">
            <text class="runeword-name">{{ runeword.name }}</text>
            <view class="favorite-icon" @click.stop="toggleFavorite(runeword.id)">
              <text
                class="iconfont"
                :class="favorites.includes(runeword.id) ? 'icon-favorite-filled' : 'icon-favorite'"
              ></text>
            </view>
          </view>
          <text class="runeword-level">需求等级: {{ runeword.level }}</text>
        </view>

        <view class="runeword-runes">
          <view
            v-for="(rune, runeIndex) in runeword.runes"
            :key="runeIndex"
            class="rune-icon"
            @click.stop="showRuneDropDetail(rune)"
          >
            <image :src="getRuneImagePath(rune)" mode="aspectFit" />
            <text class="rune-name">{{ rune }}</text>
          </view>
        </view>

        <view class="runeword-info">
          <text class="runeword-type">{{ runeword.type }}</text>
          <text class="runeword-req">{{ runeword.requirements }}</text>
        </view>

        <view class="runeword-effects">
          <text
            v-for="(effect, effectIndex) in runeword.effects"
            :key="effectIndex"
            class="effect-item"
          >
            {{ effect }}
          </text>
        </view>
      </view>
    </view>

    <!-- 符文之语详情弹窗 -->
    <u-popup ref="runeDropPopup" mode="bottom" :safeAreaInsetBottom="true">
      <view class="runeword-detail-popup" v-if="selectedRuneword">
        <view class="runeword-detail-header">
          <text class="runeword-detail-title">{{ selectedRuneword.name }}</text>
          <text class="runeword-detail-level">需求等级: {{ selectedRuneword.level }}</text>
        </view>

        <view class="runeword-detail-content">
          <view class="runeword-detail-section">
            <text class="section-subtitle">符文组合</text>
            <view class="runes-combination">
              <view
                v-for="(rune, runeIndex) in selectedRuneword.runes"
                :key="runeIndex"
                class="rune-detail-icon"
              >
                <image :src="getRuneImagePath(rune)" mode="aspectFit" />
                <text class="rune-detail-name">{{ rune }}</text>
              </view>
            </view>
          </view>

          <view class="runeword-detail-section">
            <text class="section-subtitle">装备类型</text>
            <text class="section-content">{{ selectedRuneword.type }}</text>
          </view>

          <view class="runeword-detail-section">
            <text class="section-subtitle">装备要求</text>
            <text class="section-content">{{ selectedRuneword.requirements }}</text>
          </view>

          <view class="runeword-detail-section">
            <text class="section-subtitle">效果</text>
            <view class="effects-list">
              <text
                v-for="(effect, effectIndex) in selectedRuneword.effects"
                :key="effectIndex"
                class="effect-detail-item"
              >
                {{ effect }}
              </text>
            </view>
          </view>

          <view class="runeword-detail-section" v-if="selectedRuneword.ladder">
            <text class="section-subtitle">特殊说明</text>
            <text class="section-content ladder-only">仅限天梯模式</text>
          </view>
        </view>

        <view class="runeword-detail-footer">
          <button class="close-button" @click="closeRunewordDetail">关闭</button>
        </view>
      </view>
      <view class="rune-drop-popup" v-if="selectedRuneDrop">
        <view class="rune-drop-header">
          <text class="rune-drop-title">{{ selectedRuneDrop.name || '未知符文' }}掉落出处</text>
          <text class="iconfont icon-close" @click="closeRuneDropDetail"></text>
        </view>
        <view class="rune-drop-content">
          <view class="drop-section" v-if="selectedRuneDrop.areas && selectedRuneDrop.areas.length">
            <text class="drop-section-title">掉落区域</text>
            <view class="drop-section-content">
              <text class="drop-area" v-for="area in selectedRuneDrop.areas" :key="area">{{
                area
              }}</text>
            </view>
          </view>
          <view
            class="drop-section"
            v-if="selectedRuneDrop.monsters && selectedRuneDrop.monsters.length"
          >
            <text class="drop-section-title">掉落怪物</text>
            <view class="drop-section-content">
              <text
                class="drop-monster"
                v-for="monster in selectedRuneDrop.monsters"
                :key="monster"
                >{{ monster }}</text
              >
            </view>
          </view>
          <view
            class="drop-section"
            v-if="selectedRuneDrop.chests && selectedRuneDrop.chests.length"
          >
            <text class="drop-section-title">掉落宝箱</text>
            <view class="drop-section-content">
              <text class="drop-chest" v-for="chest in selectedRuneDrop.chests" :key="chest">{{
                chest
              }}</text>
            </view>
          </view>
          <view
            class="no-data"
            v-if="
              !selectedRuneDrop.areas?.length &&
              !selectedRuneDrop.monsters?.length &&
              !selectedRuneDrop.chests?.length
            "
          >
            <text>暂无掉落信息</text>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 符文详情弹窗 -->
    <uni-popup ref="runePopup" type="center">
      <view class="rune-detail-popup" v-if="selectedRune">
        <view class="rune-detail-header">
          <text class="rune-detail-title">{{ selectedRune.name }}</text>
          <text class="rune-detail-level">需求等级: {{ selectedRune.level }}</text>
        </view>

        <view class="rune-detail-content">
          <view class="rune-detail-section">
            <text class="section-subtitle">武器效果</text>
            <text class="section-content">{{ selectedRune.weaponEffect }}</text>
          </view>

          <view class="rune-detail-section">
            <text class="section-subtitle">盔甲效果</text>
            <text class="section-content">{{ selectedRune.armorEffect }}</text>
          </view>

          <view class="rune-detail-section">
            <text class="section-subtitle">描述</text>
            <text class="section-content">{{ selectedRune.description }}</text>
          </view>
        </view>

        <view class="rune-detail-footer">
          <button class="drop-button" @click="showRuneDropDetail(selectedRune.name)">
            查看掉落出处
          </button>
          <button class="close-button" @click="closeRuneDetail">关闭</button>
        </view>
      </view>
    </uni-popup>

    <!-- 符文掉落出处弹窗 -->
    <uni-popup
      ref="runeDropPopup"
      type="bottom"
      @change="
        e => {
          if (!e.show) closeRuneDropDetail()
        }
      "
    >
      <view class="rune-drop-popup" v-if="selectedRuneDrop">
        <view class="rune-drop-header">
          <text class="rune-drop-title">{{ selectedRuneDrop.name }} 符文掉落出处</text>
          <text class="iconfont icon-close" @click="closeRuneDropDetail"></text>
        </view>

        <scroll-view scroll-y class="rune-drop-content">
          <!-- 普通难度区域 -->
          <view class="drop-section">
            <text class="drop-section-title">普通难度区域</text>
            <view class="drop-section-content">
              <text
                v-for="(area, index) in selectedRuneDrop.normalAreas"
                :key="'normal-' + index"
                class="drop-area"
                >{{ area }}</text
              >
            </view>
          </view>

          <!-- 噩梦难度区域 -->
          <view class="drop-section">
            <text class="drop-section-title">噩梦难度区域</text>
            <view class="drop-section-content">
              <text
                v-for="(area, index) in selectedRuneDrop.nightmareAreas"
                :key="'nightmare-' + index"
                class="drop-area"
                >{{ area }}</text
              >
            </view>
          </view>

          <!-- 地狱难度区域 -->
          <view class="drop-section">
            <text class="drop-section-title">地狱难度区域</text>
            <view class="drop-section-content">
              <text
                v-for="(area, index) in selectedRuneDrop.hellAreas"
                :key="'hell-' + index"
                class="drop-area"
                >{{ area }}</text
              >
            </view>
          </view>

          <!-- 怪物类型 -->
          <view class="drop-section">
            <text class="drop-section-title">怪物类型</text>
            <view class="drop-section-content">
              <text
                v-for="(monster, index) in selectedRuneDrop.monsters"
                :key="'monster-' + index"
                class="drop-monster"
                >{{ monster }}</text
              >
            </view>
          </view>

          <!-- 箱子类型 -->
          <view class="drop-section">
            <text class="drop-section-title">箱子类型</text>
            <view class="drop-section-content">
              <text
                v-for="(chest, index) in selectedRuneDrop.chests"
                :key="'chest-' + index"
                class="drop-chest"
                >{{ chest }}</text
              >
            </view>
          </view>

          <!-- 伯爵夫人掉落 -->
          <view class="drop-section">
            <text class="drop-section-title">伯爵夫人掉落概率</text>
            <view class="drop-section-content drop-table">
              <view class="drop-table-row">
                <text class="drop-table-cell">普通难度</text>
                <text class="drop-table-cell">{{ selectedRuneDrop.countess.normal }}</text>
              </view>
              <view class="drop-table-row">
                <text class="drop-table-cell">噩梦难度</text>
                <text class="drop-table-cell">{{ selectedRuneDrop.countess.nightmare }}</text>
              </view>
              <view class="drop-table-row">
                <text class="drop-table-cell">地狱难度</text>
                <text class="drop-table-cell">{{ selectedRuneDrop.countess.hell }}</text>
              </view>
            </view>
          </view>

          <!-- 地狱熔炉掉落 -->
          <view class="drop-section">
            <text class="drop-section-title">地狱熔炉掉落概率</text>
            <view class="drop-section-content drop-table">
              <view class="drop-table-row">
                <text class="drop-table-cell">普通难度</text>
                <text class="drop-table-cell">{{ selectedRuneDrop.hellforge.normal }}</text>
              </view>
              <view class="drop-table-row">
                <text class="drop-table-cell">噩梦难度</text>
                <text class="drop-table-cell">{{ selectedRuneDrop.hellforge.nightmare }}</text>
              </view>
              <view class="drop-table-row">
                <text class="drop-table-cell">地狱难度</text>
                <text class="drop-table-cell">{{ selectedRuneDrop.hellforge.hell }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { loadData } from '@/common/d2r-data/index.js'
import { runeDrops } from '@/common/d2r-data/rune-drops'
import RuneCombinationPreview from '@/components/rune-combination-preview.vue'

export default {
  components: {
    RuneCombinationPreview
  },

  data() {
    return {
      showRunewordPopup: false,
      showRuneDropPopup: false,
      runeDrops,
      categories: ['全部', '武器', '盔甲', '盾牌', '头盔', '收藏'],
      activeCategory: 0,
      runewords: [],
      runes: [],
      runeDrops: {},
      selectedRuneword: null,
      selectedRune: null,
      selectedRuneDrop: null,
      searchQuery: '',
      filteredRunewords: [],
      showCombinationPreview: false,
      sortOptions: [
        { label: '默认排序', value: 'default' },
        { label: '等级升序', value: 'level_asc' },
        { label: '等级降序', value: 'level_desc' },
        { label: '符文数量', value: 'rune_count' }
      ],
      currentSort: 'default',
      favorites: []
    }
  },

  onLoad() {
    this.loadRunewords()
    this.loadRunes()
    this.loadRuneDrops()
    this.loadFavorites()
  },

  methods: {
    navigateToUpgrade() {
      uni.navigateTo({
        url: '/pages-sub/runes/upgrade'
      });
    },
    async loadRunewords() {
      try {
        const runewords = await loadData('runewords')
        this.runewords = runewords
        this.filteredRunewords = runewords
      } catch (error) {
        console.error('加载符文之语数据失败:', error)
        uni.showToast({
          title: '加载符文之语数据失败',
          icon: 'none'
        })
      }
    },

    async loadRunes() {
      try {
        const runes = await loadData('runes')
        this.runes = runes
      } catch (error) {
        console.error('加载符文数据失败:', error)
        uni.showToast({
          title: '加载符文数据失败',
          icon: 'none'
        })
      }
    },

    loadRuneDrops() {
      try {
        loadData('runeDrops')
          .then(response => {
            if (!response) {
              console.error('符文掉落数据为空')
              return
            }

            // 确保数据是对象格式
            let runeDropsData = {}
            if (Array.isArray(response)) {
              // 如果是数组，转换为 { [runeName]: data } 格式
              response.forEach(drop => {
                if (drop?.name) {
                  runeDropsData[drop.name] = {
                    ...drop,
                    normal: drop.normal || {},
                    nightmare: drop.nightmare || {},
                    hell: drop.hell || {},
                    areas: drop.areas || [],
                    monsters: drop.monsters || [],
                    chests: drop.chests || [],
                    countess: drop.countess || { normal: '', nightmare: '', hell: '' },
                    hellforge: drop.hellforge || { normal: '', nightmare: '', hell: '' }
                  }
                }
              })
            } else if (typeof response === 'object') {
              // 如果是对象，直接使用
              runeDropsData = response
            }

            this.runeDrops = runeDropsData
            console.log('符文掉落数据加载完成:', this.runeDrops)
          })
          .catch(error => {
            console.error('加载符文掉落数据失败:', error)
            uni.showToast({
              title: '加载失败，请稍后重试',
              icon: 'none',
              duration: 3000
            })
          })
      } catch (error) {
        console.error('加载符文掉落数据异常:', error)
        uni.showToast({
          title: '加载失败，请稍后重试',
          icon: 'none',
          duration: 3000
        })
      }
    },

    setActiveCategory(index) {
      this.activeCategory = index
      this.filterRunewords()
    },

    handleSearch() {
      this.filterRunewords()
    },

    clearSearch() {
      this.searchQuery = ''
      this.filterRunewords()
    },

    filterRunewords() {
      let filtered = [...this.runewords]

      // 按类别筛选
      if (this.activeCategory > 0) {
        const categoryMap = {
          1: '武器',
          2: '盔甲',
          3: '盾牌',
          4: '头盔',
          5: '收藏'
        }

        if (this.activeCategory === 5) {
          // 收藏分类
          filtered = filtered.filter(item => this.favorites.includes(item.id))
        } else {
          filtered = filtered.filter(item => item.type === categoryMap[this.activeCategory])
        }
      }

      // 按搜索词筛选
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        filtered = filtered.filter(item => {
          // 匹配名称
          if (item.name.toLowerCase().includes(query)) {
            return true
          }

          // 匹配符文名称
          if (item.runes.some(rune => rune.toLowerCase().includes(query))) {
            return true
          }

          // 匹配效果
          if (item.effects.some(effect => effect.toLowerCase().includes(query))) {
            return true
          }

          return false
        })
      }

      // 排序
      switch (this.currentSort) {
        case 'level_asc':
          filtered.sort((a, b) => a.level - b.level)
          break
        case 'level_desc':
          filtered.sort((a, b) => b.level - a.level)
          break
        case 'rune_count':
          filtered.sort((a, b) => a.runes.length - b.runes.length)
          break
        default:
          // 默认排序，保持原顺序
          break
      }

      this.filteredRunewords = filtered
    },

    handleSortChange(e) {
      const index = e.detail.value
      this.currentSort = this.sortOptions[index].value
      this.filterRunewords()
    },

    get currentSortIndex() {
      if (!this.sortOptions) return 0
      return this.sortOptions.findIndex(opt => opt.value === this.currentSort)
    },

    getRuneImagePath(runeName) {
      const name = runeName.toLowerCase()
      return `/static/images/runes/${name}.svg`
    },

    showRunewordDetail(runeword) {
      this.selectedRuneword = runeword
      if (this.$refs.runewordPopup) {
        this.showRunewordPopup = true
      } else {
        console.error('runewordPopup 引用不存在')
        // 延迟尝试打开弹窗
        setTimeout(() => {
          if (this.$refs.runewordPopup) {
            this.showRunewordPopup = true
          }
        }, 100)
      }
    },

    loadFavorites() {
      try {
        const favorites = uni.getStorageSync('d2r_favorites') || []
        this.favorites = favorites
      } catch (e) {
        console.error('加载收藏失败:', e)
      }
    },

    toggleFavorite(runewordId) {
      const index = this.favorites.indexOf(runewordId)
      if (index === -1) {
        this.favorites.push(runewordId)
      } else {
        this.favorites.splice(index, 1)
      }

      try {
        uni.setStorageSync('d2r_favorites', this.favorites)
      } catch (e) {
        console.error('保存收藏失败:', e)
      }

      // 如果当前是收藏分类，重新筛选
      if (this.activeCategory === 5) {
        this.filterRunewords()
      }
    },

    closeRunewordDetail() {
      this.showRunewordPopup = false
    },

    showRuneDetail(runeName) {
      const rune = this.runes.find(r => r.name.toLowerCase() === runeName.toLowerCase())
      if (rune) {
        this.selectedRune = rune
        this.$refs.runePopup.open()
      }
    },

    closeRuneDetail() {
      this.$refs.runePopup.close()
    },

    async showRuneDropDetail(runeName) {
      console.log('runeName', runeName)
      try {
        const response = await loadData('runeDrops', { name: runeName })
        console.log('response', response)

        const data = response ? response[runeName] : []
        console.log('data', data)
        if (data) {
          this.selectedRuneDrop = {
            name: runeName,
            areas: data.areas || [],
            monsters: data.monsters || [],
            countess: data.countess || [],
            hellforge: data.hellforge || [],
            chests: data.chests || []
          }
          console.log('')

          this.$nextTick(() => {
            if (this.$refs.runeDropPopup) {
              this.$refs.runeDropPopup.open()
            } else {
              console.error('runeDropPopup 引用不存在')
            }
          })
        } else {
          this.selectedRuneDrop = {
            name: runeName,
            areas: {},
            monsters: {},
            chests: {}
          }
          uni.showToast({
            title: '暂无掉落信息',
            icon: 'none'
          })
        }
      } catch (e) {
        console.error('加载符文掉落数据失败:', e)
        this.selectedRuneDrop = {
          name: runeName,
          areas: [],
          monsters: [],
          chests: []
        }
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },

    closeRuneDropDetail() {
      this.$refs.runeDropPopup.close()
    },

    toggleCombinationPreview() {
      this.showCombinationPreview = !this.showCombinationPreview
    }
  }
}
</script>

<style lang="scss">
@import '@/common/d2r-theme.scss';
.runes-container {
  padding: 20px;
  background-color: $d2r-bg-dark;
  min-height: 100vh;
}

.section-header {
  margin-bottom: 20px;

  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;

    .section-title {
      font-size: 24px;
      color: $d2r-gold;
      font-weight: bold;
    }

    .upgrade-button {
      background-color: $d2r-gold;
      color: $d2r-bg-dark;
      font-weight: bold;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 14px;
    }
  }

  .section-subtitle {
    font-size: 14px;
    color: $d2r-text-secondary;
    display: block;
  }
}

// 搜索和排序容器
.search-sort-container {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}

// 搜索框样式
.search-container {
  position: relative;
  flex: 1;

  .search-input {
    width: 100%;
    height: 40px;
    background-color: $d2r-bg-medium;
    border: 1px solid $d2r-border;
    border-radius: 4px;
    padding: 0 40px 0 15px;
    color: $d2r-text;
    font-size: 14px;

    &:focus {
      border-color: $d2r-gold;
    }
  }

  .search-icon,
  .clear-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: $d2r-text-secondary;
    font-size: 18px;
  }

  .clear-icon {
    cursor: pointer;
  }
}

// 排序选择器样式
.sort-container {
  width: 120px;

  .sort-picker {
    height: 40px;
    background-color: $d2r-bg-medium;
    border: 1px solid $d2r-border;
    border-radius: 4px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: $d2r-text;
    font-size: 14px;

    .iconfont {
      color: $d2r-text-secondary;
      font-size: 12px;
      margin-left: 5px;
    }
  }
}

.rune-categories {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;

  .category-item {
    padding: 8px 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: $d2r-bg-medium;
    border: 1px solid $d2r-border;
    border-radius: 4px;
    color: $d2r-text;
    font-size: 14px;

    &.active {
      background-color: $d2r-gold;
      color: $d2r-bg-dark;
      border-color: $d2r-gold;
    }

    &.combination-toggle {
      background-color: $d2r-bg-light;
      border: 1px dashed $d2r-gold;
      margin-left: auto;
    }
  }
}

.runewords-list {
  .runeword-card {
    background-color: $d2r-bg-medium;
    border: 1px solid $d2r-border;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;

    .runeword-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      border-bottom: 1px solid $d2r-border;
      padding-bottom: 10px;

      .runeword-name-container {
        display: flex;
        align-items: center;
        gap: 10px;

        .runeword-name {
          font-size: 18px;
          color: $d2r-gold;
          font-weight: bold;
        }

        .favorite-icon {
          .iconfont {
            font-size: 16px;
            color: $d2r-gold;

            &.icon-favorite-filled {
              color: $d2r-red;
            }
          }
        }
      }

      .runeword-level {
        font-size: 14px;
        color: $d2r-text-secondary;
      }
    }

    .runeword-runes {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 15px;

      .rune-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 15px;
        margin-bottom: 10px;

        image {
          width: 40px;
          height: 40px;
          margin-bottom: 5px;
        }

        .rune-name {
          font-size: 12px;
          color: $d2r-text;
        }
      }
    }

    .runeword-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .runeword-type,
      .runeword-req {
        font-size: 14px;
        color: $d2r-text-secondary;
      }
    }

    .runeword-effects {
      .effect-item {
        display: block;
        font-size: 14px;
        color: $d2r-text;
        margin-bottom: 5px;
        padding-left: 10px;
        position: relative;

        &:before {
          content: '•';
          position: absolute;
          left: 0;
          color: $d2r-gold;
        }
      }
    }
  }
}

// 符文之语详情弹窗样式
.runeword-detail-popup {
  padding: 20px;
  background-color: $d2r-bg-medium;
  width: 80vw;
  max-width: 500px;

  .runeword-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid $d2r-gold;
    padding-bottom: 10px;

    .runeword-detail-title {
      font-size: 20px;
      color: $d2r-gold;
      font-weight: bold;
    }

    .runeword-detail-level {
      font-size: 14px;
      color: $d2r-text-secondary;
    }
  }

  .runeword-detail-content {
    .runeword-detail-section {
      margin-bottom: 15px;

      .section-subtitle {
        font-size: 16px;
        color: $d2r-gold;
        margin-bottom: 5px;
        display: block;
      }

      .section-content {
        font-size: 14px;
        color: $d2r-text;
        padding-left: 10px;
      }

      .ladder-only {
        color: $d2r-red;
      }

      .runes-combination {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;

        .rune-detail-icon {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 15px;
          margin-bottom: 10px;

          image {
            width: 50px;
            height: 50px;
            margin-bottom: 5px;
          }

          .rune-detail-name {
            font-size: 12px;
            color: $d2r-text;
          }
        }
      }

      .effects-list {
        .effect-detail-item {
          display: block;
          font-size: 14px;
          color: $d2r-text;
          margin-bottom: 5px;
          padding-left: 10px;
          position: relative;

          &:before {
            content: '•';
            position: absolute;
            left: 0;
            color: $d2r-gold;
          }
        }
      }
    }
  }

  .runeword-detail-footer {
    margin-top: 20px;
    text-align: center;

    .close-button {
      background-color: $d2r-bg-light;
      color: $d2r-gold;
      border: 1px solid $d2r-gold;
      border-radius: 4px;
      padding: 8px 20px;
      font-size: 14px;

      &:active {
        background-color: $d2r-gold;
        color: $d2r-bg-dark;
      }
    }
  }
}

// 符文详情弹窗样式
.rune-detail-popup {
  padding: 20px;
  background-color: $d2r-bg-medium;
  width: 80vw;
  max-width: 400px;

  .rune-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid $d2r-gold;
    padding-bottom: 10px;

    .rune-detail-title {
      font-size: 20px;
      color: $d2r-gold;
      font-weight: bold;
    }

    .rune-detail-level {
      font-size: 14px;
      color: $d2r-text-secondary;
    }
  }

  .rune-detail-content {
    .rune-detail-section {
      margin-bottom: 15px;

      .section-subtitle {
        font-size: 16px;
        color: $d2r-gold;
        margin-bottom: 5px;
        display: block;
      }

      .section-content {
        font-size: 14px;
        color: $d2r-text;
        padding-left: 10px;
      }
    }
  }

  .rune-detail-footer {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: space-around;

    .close-button,
    .drop-button {
      background-color: $d2r-bg-light;
      color: $d2r-gold;
      border: 1px solid $d2r-gold;
      border-radius: 4px;
      padding: 8px 20px;
      font-size: 14px;
    }

    .drop-button {
      background-color: $d2r-gold;
      color: $d2r-bg-dark;

      &:active {
        background-color: $d2r-gold;
        color: $d2r-bg-dark;
      }
    }
  }
}

// 符文掉落出处弹窗样式
.rune-drop-popup {
  padding: 20px;
  background-color: $d2r-bg-medium;
  width: 100%;
  max-height: 80vh;

  .rune-drop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid $d2r-gold;
    padding-bottom: 10px;

    .rune-drop-title {
      font-size: 20px;
      color: $d2r-gold;
      font-weight: bold;
    }

    .icon-close {
      font-size: 24px;
      color: $d2r-gold;
    }
  }

  .rune-drop-content {
    max-height: 60vh;

    .drop-section {
      margin-bottom: 20px;

      .drop-section-title {
        font-size: 16px;
        color: $d2r-gold;
        font-weight: bold;
        margin-bottom: 10px;
        display: block;
      }

      .drop-section-content {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .drop-area,
        .drop-monster,
        .drop-chest {
          background-color: $d2r-bg-light;
          color: $d2r-text;
          padding: 6px 12px;
          border-radius: 4px;
          font-size: 14px;
          border: 1px solid rgba(255, 215, 0, 0.3);
        }
      }

      .drop-table {
        width: 100%;
        display: flex;
        flex-direction: column;

        .drop-table-row {
          display: flex;
          border-bottom: 1px solid rgba(255, 215, 0, 0.2);

          &:last-child {
            border-bottom: none;
          }

          .drop-table-cell {
            padding: 8px;
            flex: 1;
            color: $d2r-text;

            &:first-child {
              color: $d2r-gold;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>
